<!-- tab组件: <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs> -->
<template>
	<view class="me-tabs" :class="{ 'tabs-fixed': fixed }" :style="{ height: tabHeightVal, background: bgColor }">
		<scroll-view v-if="tabs.length" :id="viewId" :scroll-left="scrollLeft" scroll-x scroll-with-animation :scroll-animation-duration="300">
			<view class="tabs-item">
				<!-- tab -->
				<view class="tab-item" v-for="(tab, i) in tabs" :class="{ active: value === i }" :key="i" @click="tabClick(i)">{{ getTabName(tab) }}</view>
				<!-- 下划线 -->
				<view class="tabs-line" :style="{ left: lineLeft }"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		fontColor: {
			type: String,
			default: '#666666'
		},
		tabs: {
			// 支持格式: ['全部', '待付款'] 或 [{name:'全部'}, {name:'待付款'}]
			type: Array,
			default() {
				return [];
			}
		},
		nameKey: {
			// 取name的字段
			type: String,
			default: 'name'
		},
		value: {
			// 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
			type: [String, Number],
			default: 0
		},
		fixed: Boolean, // 是否悬浮,默认false
		tabWidth: Number, // 每个tab的宽度,默认不设置值,为flex平均分配; 如果指定宽度,则不使用flex,每个tab居左,超过则水平滑动(单位默认rpx)
		height: {
			// 高度,单位rpx
			type: Number,
			default: 100
		}
	},
	data() {
		return {
			viewId:'id_' +Math.random().toString(36).substr(2, 16),
			scrollLeft: 0,
			arr: []
		};
	},
	watch: {
		tabs(){
			this.$nextTick(()=>{
				this.initWarpRect();
			})
		}
	},
	computed: {
		isScroll() {
			return this.tabWidth && this.tabs.length // 指定了tabWidth的宽度,则支持水平滑动
		},
		tabHeightPx() {
			return uni.upx2px(this.height)
		},
		tabHeightVal() {
			return this.tabHeightPx + 'px'
		},
		tabWidthPx() {
			return uni.upx2px(this.tabWidth)
		},
		tabWidthVal() {
			return this.isScroll ? this.tabWidthPx + 'px' : ''
		},
		lineLeft() {
			if (this.isScroll) {
				return this.tabWidthPx * this.value + this.tabWidthPx / 2 + 'px' // 需转为px (用rpx的话iOS真机显示有误差)
			} else {
				return 100 / this.tabs.length * (this.value + 1) - 100 / (this.tabs.length * 2) + '%'
			}
		}
	},
	methods: {
		getTabName(tab) {
			return typeof tab === 'object' ? tab[this.nameKey] : tab;
		},
		tabClick(i) {
			if (this.value != i) {
				this.$emit('input', i);
				this.$emit('change', i);
				this.scrollLeft=this.arr[i]-uni.getSystemInfoSync().windowWidth/2;
			}
		},
		initWarpRect() {
			let query = uni.createSelectorQuery().in(this);
			setTimeout(() => {
				query
					.selectAll('.tab-item')
					.boundingClientRect(data => {
						data.forEach(item => {
							this.arr.push(item.left+item.width/2);
						});
					})
					.exec();
			}, 10);
		}
	}
};
</script>

<style lang="scss">
.me-tabs {
	position: relative;
	font-size: 24rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	overflow-y: hidden;
	padding: 20upx 0;
	// box-shadow: 0px 16upx 49upx 0px rgba(167, 167, 167, 0.13);

	&.tabs-fixed {
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.tabs-item {
		position: relative;
		white-space: nowrap;
		padding: 0 20rpx; // 撑开高度,再配合me-tabs的overflow-y: hidden,以达到隐藏滚动条的目的
		box-sizing: border-box;
		width: 100%;
		.tab-item {
			display: inline-block;
			position: relative;
			font-size: 26upx;
			font-family: PingFang SC;
			color: #666666;
			padding: 10upx 40upx;
			background: #f6f6f6;
			border-radius: 30upx;
			margin-right: 20upx;
			&.active {
				color: #ffffff !important;
				font-weight: bold;
				background: #2781a7;
			}
		}
	}
}
.tab-item:last-child {
	margin-right: 0;
}
</style>
